<style include="animations chooser-shared-css">
  .apps-ask {
    text-align: center;
  }

  .chrome-logo {
    background-image: url(../images/module_icons/add_bookmarks.svg);
    background-position: center bottom;
    background-size: 170px 170px;
    height: 146px;
    margin: auto;
    margin-bottom: 32px;
    width: 170px;
  }

  h1 {
    color: var(--cr-primary-text-color);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    margin-bottom: 48px;
    outline: none;
  }

  #appChooser {
    display: block;
    white-space: nowrap;
  }

  .button-bar {
    margin-top: 4rem;
  }

  .option {
    -webkit-appearance: none;
    align-items: center;
    border-radius: 8px;
    box-sizing: border-box;
    display: inline-flex;
    font-family: inherit;
    height: 7.5rem;
    justify-content: center;
    outline: 0;
    position: relative;
    transition-duration: 500ms;
    transition-property: box-shadow;
    vertical-align: bottom;
    width: 6.25rem;
  }

  .option:not(:first-of-type) {
    margin-inline-start: 1.5rem;
  }

  .option[active] {
    border: 1px solid var(--cr-checked-color);
    color: var(--cr-checked-color);
    font-weight: 500;
  }

  .option.keyboard-focused:focus {
    outline: var(--navi-keyboard-focus-color) solid 3px;
  }

  .option-name {
    flex-grow: 0;
    line-height: 1.25rem;
    text-align: center;
    white-space: normal;
  }

  .option-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 2rem;
    margin: auto;
    width: 2rem;
  }

  .option-icon-shadow {
    background-color: var(--navi-option-icon-shadow-color);
    border-radius: 50%;
    display: flex;
    height: 3rem;
    margin-bottom: .25rem;
    width: 3rem;
  }

  .option iron-icon {
    --iron-icon-fill-color: var(--cr-card-background-color);
    background: var(--navi-check-icon-color);
    border-radius: 50%;
    display: none;
    height: .75rem;
    margin: 0;
    position: absolute;
    right: .375rem;
    top: .375rem;
    width: .75rem;
  }

  :host-context([dir=rtl]) .option iron-icon {
    left: .375rem;
    right: unset;
  }

  .option.keyboard-focused:focus iron-icon[icon='cr:check'],
  .option:hover iron-icon[icon='cr:check'],
  .option[active] iron-icon[icon='cr:check'] {
    display: block;
  }

  .option[active] iron-icon[icon='cr:check'] {
    background: var(--cr-checked-color);
  }

  /* App Icons */
  .gmail {
    content: -webkit-image-set(
        url(chrome://theme/IDS_WELCOME_GMAIL@1x) 1x,
        url(chrome://theme/IDS_WELCOME_GMAIL@2x) 2x);
  }

  .youtube {
    content: -webkit-image-set(
        url(chrome://theme/IDS_WELCOME_YOUTUBE@1x) 1x,
        url(chrome://theme/IDS_WELCOME_YOUTUBE@2x) 2x);
  }

  .maps {
    content: -webkit-image-set(
        url(chrome://theme/IDS_WELCOME_MAPS@1x) 1x,
        url(chrome://theme/IDS_WELCOME_MAPS@2x) 2x);
  }

  .translate {
    content: -webkit-image-set(
        url(chrome://theme/IDS_WELCOME_TRANSLATE@1x) 1x,
        url(chrome://theme/IDS_WELCOME_TRANSLATE@2x) 2x);
  }

  .news {
    content: -webkit-image-set(
        url(chrome://theme/IDS_WELCOME_NEWS@1x) 1x,
        url(chrome://theme/IDS_WELCOME_NEWS@2x) 2x);
  }

  .search {
    content: -webkit-image-set(
        url(chrome://theme/IDS_WELCOME_SEARCH@1x) 1x,
        url(chrome://theme/IDS_WELCOME_SEARCH@2x) 2x);
  }
</style>
<div class="apps-ask">
  <div class="chrome-logo" aria-hidden="true"></div>
  <h1 tabindex="-1">[[subtitle]]</h1>
  <div id="appChooser">
    <div class="slide-in">
      <template is="dom-repeat" items="[[appList_]]">
        <button active$="[[item.selected]]"
            aria-pressed$="[[getAriaPressed_(item.selected)]]"
            on-click="onAppClick_" on-pointerdown="onAppPointerDown_"
            on-keyup="onAppKeyUp_" class="option">
          <div class="option-icon-shadow">
            <div class$="[[item.icon]] option-icon"></div>
          </div>
          <div class="option-name">[[item.name]]</div>
          <iron-icon icon="cr:check"></iron-icon>
        </button>
      </template>
    </div>

    <div class="button-bar">
      <cr-button id="noThanksButton" on-click="onNoThanksClicked_">
        $i18n{skip}
      </cr-button>
      <step-indicator model="[[indicatorModel]]"></step-indicator>
      <cr-button class="action-button" disabled$="[[!hasAppsSelected_]]"
          on-click="onNextClicked_">
        $i18n{next}
        <iron-icon icon="cr:chevron-right"></iron-icon>
      </cr-button>
    </div>
  </div>
</div>
